<template>
  <div>
    <div class="pic-box" @click="play">
      <!-- 封面 -->
      <img class="pic" :class="{ playing: playState }" :src="picUrl" alt="" />
      <!-- 播放按钮 -->
      <img v-show="!playState" class="start-img" src="./img/start.png" alt="" />
    </div>
    <audio
      ref="au"
      :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
    ></audio>
  </div>
</template>

<script>
import { getSongById } from '@/api/play'

export default {
  name: 'MyPlay',

  data () {
    return {
      picUrl: '',
      id: this.$route.query.id,
      // 用它表示当前是否正在播放
      playState: false
    }
  },
  methods: {
    play () {
      // const au = document.querySelector('audio')

      // console.log(this.$refs.au)

      //   paused是得到暂停状态，如果当前是暂停会得到true，如果当前在播放得到false
      //   if (au.paused) {
      //     au.play()
      //   }else {
      //     au.pause()
      //   }

      // this.$refs.au.paused ? this.$refs.au.play() : this.$refs.au.pause()

        if (this.playState == true) {
          // 暂停
          this.$refs.au.pause()
          this.playState = false
        } else {
          // 让audio标签播放起来
          this.$refs.au.play()
          this.playState = true
        }
    }
  },

  async created () {
    const res = await getSongById(this.id)
    console.log(res)
    this.picUrl = res.songs[0].al.picUrl
  }
}
</script>

<style>
.pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.pic-box {
  position: relative;
  text-align: center;
}

.pic-box .start-img {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.playing {
  animation: rotate 7s linear infinite;
}

@keyframes rotate {
  from {
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
